<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="栏目" prop="channelId" :label-width="formLabelWidth" v-if="form.id">
				<el-select v-model="form.channelId" placeholder="请选择" v-if="form.id">
					<el-option :label="selLeftTree.name" :value="selLeftTree.id">
						<el-tree
							:data="leftTreeData"
							:props="treeProps"
							accordion
							highlight-current
							@node-click="handleSelectionChange"
						></el-tree>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="标题" :label-width="formLabelWidth" prop="title">
				<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"></el-input>
			</el-form-item>
			<el-form-item label="作者" :label-width="formLabelWidth" prop="author">
				<el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
			</el-form-item>
			<el-form-item label="来源" :label-width="formLabelWidth" prop="source">
				<el-input v-model="form.source" autocomplete="off" placeholder="请输入来源"></el-input>
			</el-form-item>
			<el-form-item label="摘要" :label-width="formLabelWidth" prop="info">
				<el-input type="textarea" :rows="2" placeholder="请输入摘要" v-model="form.info"></el-input>
			</el-form-item>
			<el-form-item label="关键字" :label-width="formLabelWidth" prop="keywords">
				<el-input v-model="form.keywords" autocomplete="off" placeholder="请输入关键字"></el-input>
			</el-form-item>
			<el-form-item label="缩略图" :label-width="formLabelWidth" prop="picname">
				<fortress-upload type="image" name="picname" :formData="form"></fortress-upload>
				<resource-select modelName="form.picname" type="image" @choosed="resourceChoosed"></resource-select>
			</el-form-item>
			<el-form-item label="发布人" :label-width="formLabelWidth" prop="publisher">
				<el-input v-model="form.publisher" autocomplete="off" placeholder="请输入发布人"></el-input>
			</el-form-item>
			<el-form-item label="发布时间" :label-width="formLabelWidth" prop="pubdate">
				<el-date-picker
					v-model="form.pubdate"
					type="datetime"
					placeholder="选择日期时间"
					value-format="yyyy-MM-dd HH:mm:ss"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="内容" :label-width="formLabelWidth" prop="contents">
				<fortress-editor v-model="form.contents"></fortress-editor>
			</el-form-item>
			<!-- 扩展字段 start -->
			<el-form-item :label="item.colTitle" :label-width="formLabelWidth" prop="name" v-for="item in cols" :key="item.id">
				<!-- 多行文本 2-->
				<el-input
					v-if="item.formType == 2"
					type="textarea"
					:rows="2"
					:placeholder="`请输入${item.colTitle}`"
					v-model="form[item.propName]"
				></el-input>
				<!-- 富文本 2-->
				<fortress-editor v-else-if="item.formType == 3" v-model="form[item.propName]"></fortress-editor>
				<!-- 下拉 4-->
				<!-- 单选框 5-->
				<!-- 复选框 6-->
				<!-- 日期 7-->
				<!-- 日期时间 8-->
				<!-- 图片上传组件 9-->
				<template v-else-if="item.formType == 9">
					<template v-if="item.limitSize > 1">
						<fortress-upload
							type="image"
							:name="item.propName"
							:formData="form"
							:multiple="true"
							:limit="item.limitSize"
						></fortress-upload>
						<resource-select
							:modelName="`form.${item.propName}`"
							type="image"
							:multiple="true"
							@choosed="resourceChoosed"
						></resource-select>
					</template>
					<template v-else>
						<fortress-upload type="image" :name="item.propName" :formData="form"></fortress-upload>
						<resource-select :modelName="`form.${item.propName}`" type="image" @choosed="resourceChoosed"></resource-select>
					</template>
				</template>

				<!-- 文件上传组件 10-->
				<!-- 视频上传组件 11-->
				<!-- 开关 12-->
				<!-- 计数器 13-->
				<!-- 输入框 1-->

				<el-input
					v-else
					v-model="form.colData[item.propName]"
					autocomplete="off"
					:placeholder="`请输入${item.colTitle}`"
				></el-input>
			</el-form-item>
			<!-- 扩展字段 end -->

			<el-form-item label="属性" :label-width="formLabelWidth" prop="attr">
				<el-checkbox-group v-model="form.attr">
					<el-checkbox v-for="item in attrList" :label="item.id" :key="item.id">{{ item.title }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="标签" :label-width="formLabelWidth" prop="tags">
				<el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
					<el-option v-for="item in tagList" :key="item.id" :label="item.title" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="专题" :label-width="formLabelWidth" prop="special">
				<el-checkbox-group v-model="form.special">
					<el-checkbox v-for="item in specialList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="浏览次数" :label-width="formLabelWidth" prop="click">
				<el-input-number v-model="form.click"></el-input-number>
			</el-form-item>
			<el-form-item label="权重排序" :label-width="formLabelWidth" prop="sort">
				<el-input-number v-model="form.sort"></el-input-number>
			</el-form-item>
			<el-divider content-position="center">请填写审核信息</el-divider>
			<el-form-item label="审核结果" :label-width="formLabelWidth" prop="status">
				<el-radio-group v-model="form.status">
					<el-radio :label="2">通过</el-radio>
					<el-radio :label="3">拒绝</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="审核意见" :label-width="formLabelWidth" prop="auditop">
				<el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="form.auditop"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">通 过</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { cmschannelCols } from "@/api/cms/cmschannel.js"
import { cmsarticleInfo, cmsarticleAudit } from "@/api/cms/cmsarticle.js"
import { cmssystagList } from "@/api/cms/cmssystag.js"
import { cmscusttagList } from "@/api/cms/cmscusttag.js"
import { cmssubjectList } from "@/api/cms/cmssubject.js"
import { enumList } from "@/api/public.api.js"
import * as ftVal from "@/common/fortressValidator.js"
import ResourceSelect from "@/components/resource-select.vue"
import { ct } from "@/mixins/mixmethod.js"
export default {
	mixins: [ct],
	props: ["leftTreeData"],
	data() {
		return {
			visible: false,
			selLeftTree: {},
			form: {
				id: "",
				modelId: "",
				title: "",
				author: "",
				source: "",
				contents: "",
				info: "",
				keywords: "",
				picname: "",
				publisher: "",
				pubdate: "",
				url: "",
				click: "",
				sort: "",
				auditer: "",
				auditop: "",
				channelId: "",
				channelIdName: "",
				status: "",
				attr: [],
				tags: [],
				special: [],
				colData: {},
			},
			cols: [],
			formLabelWidth: "120px",
			myconfig: window.$conf.commonConf.ueConfig,
			rules: {
				title: [{ required: true, message: "请输入标题", trigger: "blur" }],
				channelId: [{ required: true, message: "请输入栏目", trigger: "blur" }],
				status: [{ required: true, message: "请选择审核结果", trigger: "blur" }],
			},
			ArticleStatus_cmsList: [],
			treeProps: {
				children: "children",
				label: function treeNameHandle(data) {
					console.log("treeProps", data)
					let c = data.category == 1 ? "栏目" : data.category == 2 ? "封面" : data.category == 3 ? "外链" : ""
					return data.name + (c ? "|(" + c + ")" : "")
				},
			},
			attrList: [],
			tagList: [],
			specialList: [],
		}
	},
	created() {
		this.getAttrList()
	},
	components: {
		"resource-select": ResourceSelect,
	},
	methods: {
		getAttrList() {
			cmssystagList().then(resp => {
				if (resp.code == 0) {
					this.attrList = resp.data
				}
			})
			cmscusttagList().then(resp => {
				if (resp.code == 0) {
					this.tagList = resp.data
				}
			})
			cmssubjectList().then(resp => {
				if (resp.code == 0) {
					this.specialList = resp.data
				}
			})
		},
		queryEnumList() {
			this.ArticleStatus_cmsList = []
			enumList("ArticleStatus", "cms").then(resp => {
				if (resp.code == 0) {
					this.ArticleStatus_cmsList = resp.data
				}
			})
		},
		init(id, treeId, treeName) {
			this.resetForm()
			this.queryEnumList()
			//初始扩展字段
			cmschannelCols(treeId).then(rp => {
				if (rp.code == 0) {
					this.$nextTick(() => {
						if (rp.data) {
							this.form.modelId = rp.data.model
							this.cols = rp.data.cols
							this.cols.forEach(item => {
								this.form.colData[item.propName] = ""
								this.form[item.propName] = ""
							})
							//修改
							if (id) {
								cmsarticleInfo(id).then(resp => {
									if (resp.code == 0) {
										this.$nextTick(() => {
											this.form = {
												...this.form,
												...resp.data,
											}
											if (this.form.status != 2 && this.form.status != 3) {
												this.form.status = ""
											}
											for (var c in this.form.colData) {
												if (this.form.colData[c]) {
													this.form[c] = this.form.colData[c]
												}
											}
											this.selLeftTree = {
												id: resp.data.channelId,
												name: resp.data.channelIdName,
											}
											console.log("cmsarticleInfo", this.form)
										})
									} else {
										this.$msg({
											message: resp.msg,
											type: "error",
										})
									}
								})
							} else {
								this.form.channelId = treeId
								this.selLeftTree = {
									id: treeId,
									name: treeName,
								}
							}

							this.visible = true
						}
					})
				} else {
					this.$msg({
						message: rp.msg,
						type: "error",
					})
				}
			})
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					//初始化colData信息
					if (this.form.colData) {
						for (var col in this.form.colData) {
							this.form.colData[col] = this.form[col]
						}
					}
					//修改
					if (this.form.id) {
						cmsarticleAudit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				id: "",
				modelId: "",
				title: "",
				author: "",
				source: "",
				contents: "",
				info: "",
				keywords: "",
				picname: "",
				publisher: "",
				pubdate: "",
				url: "",
				click: "",
				sort: "",
				auditer: "",
				auditop: "",
				channelId: "",
				channelIdName: "",
				status: "",
				attr: [],
				tags: [],
				special: [],
				colData: {},
			}
			this.cols = []
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
		//切换树数据选中状态
		handleSelectionChange(data) {
			if (data.category == 1) {
				this.selLeftTree.id = data.id
				this.selLeftTree.name = data.name
				this.form.channelId = data.id
			} else {
				this.$msg({
					message: "请选择列表类栏目",
					type: "error",
				})
			}
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
.select-new-tag {
	width: 100px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>
